<template>
  <div>
    <div class="container-fluid">
      <div class="common_title">
        文章类别管理
      </div>
      <div class="container-fluid common_con">
        <table
          class="table table-striped table-bordered table-hover mp20 category_table"
        >
          <thead>
            <tr>
              <th>名称</th>
              <th>Slug</th>
              <th class="text-center" width="100">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in categoryList" :key="item.id">
              <td>{{ item.name }}</td>
              <td>{{ item.slug }}</td>
              <td class="text-center">
                <a
                  href="javascript:void(0)"
                  data-toggle="modal"
                  class=" btn btn-info btn-xs"
                  @click="editCategory(item.id, item.name, item.slug)"
                  >编辑</a
                >
                <a
                  href="javascript:void(0)"
                  class="btn btn-danger btn-xs"
                  @click="deleteCategory(item.id)"
                  >删除</a
                >
              </td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="3" class="text-center">
                <!-- // 通过data属性(data-toggle / data-target)控制模态框的显示 -->
                <a
                  href="javascript:void(0)"
                  class="btn btn-success"
                  id="xinzengfenlei"
                  data-toggle="modal"
                  data-target="#myModal"
                  @click="dialogFormVisible = true; title='新增文章类别'; isAdd = true"
                  >新增分类</a
                >
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>

    <!-- 弹出新增框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      :modal-append-to-body="false"
    >
      <el-form>
        <el-form-item label="分类名称" label-width="120px">
          <el-input v-model="name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类描述" label-width="120px">
          <el-input v-model="slug" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false; name=''; slug=''">取 消</el-button>
        <el-button type="primary" @click="isAdd ? addCategory() : updateCategory()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入接口
import {
  getArticleCategory,
  addArticleCategory,
  editArticleCategory,
  deleteArticleCategory
} from './article.js'
export default {
  name: 'articleCategory',
  data () {
    return {
      categoryList: [], // 文章类别
      name: '', // 分类名称
      slug: '', // 分类描述
      id: '',
      dialogFormVisible: false, // 默认隐藏
      title: '',
      isAdd: true,   // true表示新增,false表示编辑
    }
  },
  methods: {
    // 封装获取数据函数
    async reload () {
      let res = await getArticleCategory()
      // console.log(res);
      this.categoryList = res.data.data
    },
    // 新增类别
    async addCategory () {
      let res = await addArticleCategory({
        name: this.name,
        slug: this.slug
      })
      console.log(res)
      // 弹窗提示，并关闭新增窗口
      this.$message('新增成功')
      this.dialogFormVisible = false
      // 重新获取数据
      this.reload()
    },
    // 编辑类别
    async editCategory(id, name, slug){
      // 弹出编辑框，并显示数据
      this.dialogFormVisible = true
      this.name = name,
      this.slug = slug
      this.id = id
      this.title = '编辑文章类别',
      this.isAdd = false
    },
    async updateCategory(){
      let res = await editArticleCategory({
        id: this.id,
        name: this.name,
        slug: this.slug
      })
      console.log(res);
      // 弹窗提示，并关闭新增窗口
      this.$message('修改成功')
      this.dialogFormVisible = false
      // 重新获取数据
      this.reload()
      // isAdd改为true
      this.isAdd = true
      // 清空
      this.name = ''
      this.slug = ''
    },
    // 删除类别
    async deleteCategory (id) {
      let res = await deleteArticleCategory(id)
      console.log(res)
      // 弹窗提示
      this.$message('删除成功')
      // 重新获取数据
      this.reload()
    }
  },
  created () {
    this.reload()
  }
}
</script>

<style></style>
